window.onload = function () {
    console.log(pkData)
    const start = this.document.querySelector('#start')
    const gameCover = this.document.querySelector('#game-cover')
    const game = this.document.querySelector('#game')
    const pkList = this.document.querySelector('#pk-list')
    const targetList = this.document.querySelector('#target-list')
    const targetPkWrap = this.document.querySelector('#target-pk-wrap')
    const levelTitle = this.document.querySelector('#level')
    const messageBox = this.document.querySelector('#message-box')
    const second = this.document.querySelector('#second')
    const skillWrap = document.querySelector('#skill-wrap')
    const lookAllBtn = document.querySelector('#look-all')
    const hourglass = document.querySelector('#hourglass')
    const titleColor = ['#ccff33', '#cccc33', '#cc9933', '#cc6633', '#cc3333', '#cc0000']
    let level = 1
    let targetPkList = []
    let randomList = []
    let timer = null
    let timer1 = null
    let skillTimer1 = null
    let skillTimer2 = null
    let leftTime = 0
    let skillLeftTime1 = 35
    let skillLeftTime2 = 35
    let pkItem = null
        window.onscroll = function () {
            if (this.navigator.userAgent.indexOf('Firefox') === -1) {
                if (this.pageYOffset >= 72) {
                    targetPkWrap.className = 'target-pk fix-top'
                } else {
                    targetPkWrap.className = 'target-pk'
                }
            } else {
                if(level === 1 || level === 2) return
                if (this.pageYOffset >= 72) {
                    targetPkWrap.className = 'target-pk fix-top'
                } else {
                    targetPkWrap.className = 'target-pk'
                }
            }
        }
    this.document.addEventListener('selectstart', (e) => {
        e.preventDefault()
    })
    this.document.addEventListener('contextmenu', (e) => {
        e.preventDefault()
    })
    function startGame() {
        gameCover.style.display = 'none'
        game.style.display = 'block'
        skillWrap.style.display = 'flex'
        levelTitle.innerText = `第 ${level} 关`
        levelTitle.style.color = titleColor[level - 1]
        reset()
        makeRandomList()
    }
    function randomMath(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min
    }
    function makeTargetList() {
        if (targetPkList.length === level) return
        const item = randomList[randomMath(0, level * 8)]
        if (targetPkList.includes(item)) {
            makeTargetList()
            return
        }
        targetPkList.push(item)
        makeTargetList()
    }
    function makeRandomList() {
        const randomHtmlList = []
        const targetHtmlList = []
        // 生成可点击总扑克牌
        for (i = 0; i < level * 9; i++) {
            const item = pkData[randomMath(0, 53)]
            randomList.push(item)
            randomHtmlList.push(`
            <div class="pk-item" data-name="${item}">
                <div class="pk-box" data-name="${item}">
                    <img src="./img/index.jpeg" alt="">
                    <img src="./img/pk${item}.jpg"  alt="" class="pk-face" data-name="${item}">
                </div>
                <div class="mark"></div>
            </div>
            `)
        }
        // 利用现有的牌 生成目标牌
        makeTargetList()
        console.log(targetPkList)
        for (i = 0; i < targetPkList.length; i++) {
            targetHtmlList.push(`
            <li class="target-item">
                    <img src="./img/pk${targetPkList[i]}.jpg" alt="">
                </li>
            `)
        }
        targetList.innerHTML = targetHtmlList.join('')
        pkList.innerHTML = randomHtmlList.join('')
        setTargetAnimation()
        pkItem = document.getElementsByClassName('pk-item')
        for (i = 0; i < pkItem.length; i++) {
            pkItem[i].addEventListener('mouseenter', handleMouseEnter)
            pkItem[i].addEventListener('mouseleave', handleMouseLeave)
            // pkItem[i].addEventListener('click', clickPk)
            pkItem[i].onclick = clickPk
        }
    }
    function handleMouseEnter(event) {
        event.target.children[0].style.transform = 'rotateY(180deg) scale(1.1)'
        timer1 = setTimeout(() => {
            event.target.children[0].style.transform = 'rotate(0)'
            event.target.children[0].style.animation = 'fadeout .8s forwards'
        }, 7000 - level * 1000 > 4000 ? 4000 : 7000 - level * 1000)
    }
    function handleMouseLeave(event) {
        clearTimeout(timer1)
        event.target.children[0].style.transform = 'rotate(0)'
    }
    function clickPk(event) {
        // firefox
        if (navigator.userAgent.indexOf('Firefox') !== -1) {
            let name = event.target.parentNode.parentNode.getAttribute('data-name') ? event.target.parentNode.parentNode.getAttribute('data-name') : event.target.getAttribute('data-name')
            console.log(name)
            console.log(event.target)
            // 选对了
            if (targetPkList.includes(name)) {
                targetPkList.splice(targetPkList.indexOf(name), 1)
                if (!targetPkList.length) {
                    level = level + 1
                    reset()
                    nextLevel()
                }
                event.target.parentNode.parentNode.onclick = null
                // event.target.removeEventListener('click', clickPk)
                event.target.parentNode.parentNode.removeEventListener('mouseenter', handleMouseEnter)
                event.target.parentNode.parentNode.removeEventListener('mouseleave', handleMouseLeave)
                event.target.parentNode.parentNode.children[1].style.display = 'block'
                event.target.parentNode.parentNode.children[0].style.transfrom = 'rotateY(180deg)'
            }
            // 选错了 
            else {
                console.log('wrong')
                clearInterval(timer)
                messageTip('很遗憾，你找的牌不是我想要的', '#cc3300', () => {
                    // location.reload(true)
                })
            }
        }
        // chorme
        else {
            let name = event.target.getAttribute('data-name')

            // 选对了
            if (targetPkList.includes(name)) {
                targetPkList.splice(targetPkList.indexOf(name), 1)
                if (!targetPkList.length) {
                    level = level + 1
                    reset()
                    nextLevel()
                }
                event.target.onclick = null
                // event.target.removeEventListener('click', clickPk)
                event.target.removeEventListener('mouseenter', handleMouseEnter)
                event.target.removeEventListener('mouseleave', handleMouseLeave)
                event.target.children[1].style.display = 'block'
                event.target.children[0].style.transfrom = 'rotateY(180deg)'
            }
            // 选错了 
            else {
                clearInterval(timer)
                messageTip('很遗憾，你找的牌不是我想要的', '#cc3300', () => {
                    location.reload(true)
                })
            }
        }

    }
    function setTargetAnimation() {
        for (i = 0; i < targetList.children.length; i++) {
            targetList.children[i].style.animationDuration = `${2 - level * 0.1}s`
        }
    }
    function reset() {
        clearInterval(timer)
        targetPkList = []
        randomList = []
        leftTime = 20 * level
        second.innerHTML = leftTime
        timer = setInterval(() => {
            leftTime--
            if (leftTime <= 0) {
                clearInterval(timer)
                messageTip('很遗憾，时间到了', '#99ccff', () => {
                    location.reload(true)
                })
            }
            second.innerHTML = leftTime
        }, 1000)
    }
    function nextLevel() {
        if (level >= 7) {
            messageTip('恭喜你通关了!', '#F70909', () => {
                location.reload()
            })
            clearInterval(timer)
            return
        }

        window.scrollTo(0, 0)
        messageTip(`第 ${level} 关`, titleColor[level - 1])
        levelTitle.innerText = `第 ${level} 关`
        levelTitle.style.color = titleColor[level - 1]
        makeRandomList()
    }
    function messageTip(title, color, cb = () => { }) {
        if (!color) {
            color = '#fff'
        }
        messageBox.style.display = 'block'
        messageBox.style.color = color
        messageBox.innerText = title
        setTimeout(() => {
            messageBox.style.animation = 'fadeout .8s forwards'
            setTimeout(() => {
                messageBox.style.display = 'none'
                messageBox.style.animation = ''
                cb()
            }, 800)
        }, 1000)
    }
    function lookAll(e) {
        e.target.disabled = true
        e.target.innerText = `${skillLeftTime1}秒后可用`
        //  let pkItem = document.getElementsByClassName('pk-item')
        for (i = 0; i < pkItem.length; i++) {
            pkItem[i].children[0].style.transform = 'rotateY(180deg)'
            pkItem[i].removeEventListener('mouseenter', handleMouseEnter)
            pkItem[i].removeEventListener('mouseleave', handleMouseLeave)
        }
        setTimeout(() => {
            for (i = 0; i < pkItem.length; i++) {
                if (!pkItem[i].onclick) {
                    pkItem[i].children[0].style.transform = 'rotate(0)'
                    pkItem[i].children[0].style.animation = 'fadeout .8s forwards'
                    continue
                }
                pkItem[i].children[0].style.transform = 'rotateY(0)'
                pkItem[i].addEventListener('mouseenter', handleMouseEnter)
                pkItem[i].addEventListener('mouseleave', handleMouseLeave)
            }
        }, 2500);
        skillTimer1 = setInterval(() => {
            skillLeftTime1--
            e.target.innerText = `${skillLeftTime1}秒后可用`
        }, 1000)
        setTimeout(() => {
            clearInterval(skillTimer1)
            skillLeftTime1 = 35
            e.target.innerText = `预言者`
            e.target.disabled = false
        }, 35000)
    }
    function slowAnimation(e) {
        e.target.disabled = true
        e.target.innerText = `${skillLeftTime2}秒后可用`
        for (i = 0; i < targetList.children.length; i++) {
            targetList.children[i].style.animationDuration = `0s`
            targetList.children[i].style.transform = `translateX(calc(36vw + ${-25 * level + 150}px))`
        }
        setTimeout(() => {
            for (i = 0; i < targetList.children.length; i++) {
                targetList.children[i].style.animationDuration = `${2 - level * 0.1}s`
                targetList.children[i].style.transform = ''
            }
        }, 1500)
        skillTimer2 = setInterval(() => {
            skillLeftTime2--
            e.target.innerText = `${skillLeftTime2}秒后可用`
        }, 1000)
        setTimeout(() => {
            clearInterval(skillTimer2)
            skillLeftTime2 = 35
            e.target.innerText = `沙漏之握`
            e.target.disabled = false
        }, 35000)
    }
    // function skillReset () {
    //     clearTimeout(skillTimer1)
    //     clearTimeout(skillTimer2)
    //     lookAllBtn.disabled = false
    //     hourglass.disabled = false
    // }
    // function 
    start.onclick = startGame
    lookAllBtn.onclick = lookAll
    hourglass.onclick = slowAnimation
}